<template>
  <div class="purchase-order-main">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">
            <el-icon class="title-icon"><Document /></el-icon>
            采购订单管理
          </h1>
          <p class="page-description">管理和跟踪所有采购订单，包括订单创建、审批、执行等流程</p>
        </div>
        <div class="header-right">
          <div class="quick-stats">
            <div class="stat-item">
              <div class="stat-value">{{ statistics.total }}</div>
              <div class="stat-label">订单总数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value pending">{{ statistics.pending }}</div>
              <div class="stat-label">待审批</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速操作区域 -->
    <div class="quick-actions">
      <el-card shadow="never">
        <div class="actions-content">
          <div class="actions-left">
            <el-button type="primary" size="large" @click="createOrder">
              <el-icon><Plus /></el-icon>
              新增采购订单
            </el-button>
          </div>
          <div class="actions-right">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索订单号、供应商..."
              size="large"
              style="width: 300px"
              clearable
              @keyup.enter="handleQuickSearch"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
              <template #append>
                <el-button @click="handleQuickSearch">搜索</el-button>
              </template>
            </el-input>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 采购订单列表 -->
    <div class="order-list-container">
      <PurchaseOrderList ref="orderListRef" />
    </div>


  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Document, Plus, Refresh, Download, Search } from '@element-plus/icons-vue'
import { usePurchaseOrderStore } from '@/stores/purchaseOrder'
import PurchaseOrderList from './PurchaseOrderList.vue'

// Router
const router = useRouter()

// Store
const purchaseOrderStore = usePurchaseOrderStore()

// 响应式数据
const searchKeyword = ref('')
const orderListRef = ref()

// 计算属性
const statistics = computed(() => purchaseOrderStore.statistics)

// 生命周期
onMounted(async () => {
  await loadInitialData()
})

// 方法
const loadInitialData = async () => {
  try {
    await purchaseOrderStore.fetchPurchaseOrders()
  } catch (error) {
    console.error('加载初始数据失败:', error)
    ElMessage.error('加载数据失败')
  }
}

const createOrder = () => {
  router.push('/main/procurement/purchase-order/create')
}

const handleQuickSearch = () => {
  if (orderListRef.value) {
    // 调用子组件的搜索方法
    orderListRef.value.performSearch(searchKeyword.value)
  }
}


</script>

<style scoped>
.purchase-order-main {
  padding: 0;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  background: linear-gradient(135deg, #409eff 0%, #1890ff 100%);
  color: white;
  padding: 24px 32px;
  margin-bottom: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-icon {
  font-size: 32px;
}

.page-description {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
  line-height: 1.5;
}

.header-right {
  margin-left: 24px;
}

.quick-stats {
  display: flex;
  gap: 32px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-value.pending {
  color: #ffd700;
}

.stat-label {
  font-size: 14px;
  opacity: 0.8;
}

.quick-actions {
  max-width: 1200px;
  margin: 0 auto 24px auto;
  padding: 0 32px;
}

.quick-actions :deep(.el-card__body) {
  padding: 20px;
}

.actions-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.actions-left {
  display: flex;
  gap: 12px;
}

.actions-right {
  display: flex;
  align-items: center;
}

.order-list-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .header-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .header-right {
    margin-left: 0;
  }

  .actions-content {
    flex-direction: column;
    gap: 16px;
  }

  .actions-left {
    flex-wrap: wrap;
    justify-content: center;
  }

  .quick-actions,
  .order-list-container {
    margin-left: 16px;
    margin-right: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 20px 16px;
  }

  .page-title {
    font-size: 24px;
  }

  .quick-stats {
    gap: 20px;
  }

  .stat-value {
    font-size: 24px;
  }

  .actions-left {
    width: 100%;
    justify-content: center;
  }

  .actions-right {
    width: 100%;
    justify-content: center;
  }

  .actions-right .el-input {
    width: 100% !important;
  }
}
</style> 